<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<script type="text/javascript">

			//为修改绑定点击事件
			function updateAddress(aid){
					//执行跳转到指定页面
					jumpWithParam(aid);
			}
			//携带数据进行跳转
			function jumpWithParam(param){
				//拼接跳转连接并带上需要查询的aid值
				url = "editAddress.html?aid=" + param;
				location.href = url;
			}

			//为删除绑定点击事件
			function deleteAddress(aid,isDefault){
				if (isDefault === 1){
					alert("默认地址不能删除，需要删除请先设置为非默认地址")
					return false;
				}
				if (confirm("确定要删除这条收货地址吗？")){
					$.ajax({
						url: "/address/deleteAddress",
						type: "post",
						data: "aid=" + aid,
						dataType: "json",
						success:function (res) {
							alert("删除成功")
							location.reload();
						},
						error:function (error) {
							alert(error.message)
						}
					})
				}

			}
			//为设为默认地址绑定点击事件
			function setDefault(aid){
				if (confirm("确定要这条收货地址设为默认地址吗？")){
					$.ajax({
						url: "/address/setAddress",
						type: "post",
						data: "aid=" + aid,
						dataType: "json",
						success:function (res) {
							alert("设置成功")
							location.reload();
						},
						error:function (error) {
							alert(error.message)
						}
					})
				}
			}

			$(function () {

				//引入公共头部、中间导航条以及页脚
				$(".header").load("components/head.html")
				$(".footer").load("components/footer.html")
				$(".middleNavigation").load("components/middleNavigationBar.html")

				//页面加载完成自动发送ajax请求查询用户地址
				$.ajax({
					url: "/address",
					type: "get",
					success: function (res) {
						if (res.data.length !== 0){
							for (i = 0;i < res.data.length;i++){
								let str = "";
								let address = res.data[i];
								str = "<tr>"
										+ "<td>"+ address.tag + "</td>"
										+ "<td>"+ address.name + "</td>"
										+ "<td>"
										+ address.provinceName + address.cityName + address.areaName + address.address
										+ "</td>"
										+ "<td>" + address.phone + "</td>"
										+ "<td>"
										+ "<a href='javascript:void(0);' onclick='updateAddress(#{editAid})' class='btn btn-xs btn-info'>"
										+ "<span class='fa fa-edit'></span>修改"
										+ "</a>"
										+ "</td>"
										+ "<td>"
										+ "<a href='javascript:void(0);' onclick='deleteAddress(#{deleteAid},#{isDefault})' class='btn btn-xs add-del btn-info'>"
										+ "<span class='fa fa-trash-o'></span>删除"
										+ "</a>"
										+ "</td>"
										+ "<td>"
										+ "<a href='javascript:void(0);' onclick='setDefault(#{defaultAid})' class='btn btn-xs add-def btn-default'>设为默认</a>"
										+ "</td>"
									  + "</tr>"
								//使用正则表达式替换获取该地址的aid值，#{aid}只是一个占位符的含义，没其他含义
								str = str.replace("#{editAid}",address.aid)
								str = str.replace("#{deleteAid}",address.aid)
								str = str.replace("#{defaultAid}",address.aid)
								str = str.replace("#{isDefault}",address.isDefault)
								$("#address-list").append(str)
							}
							//将某个元素隐藏使用hide()方法
							$(".add-def:eq(0)").hide();

						}else {
							let text = "<tr><td colspan='12' style='font-weight: bold;color: red;padding: 20px;font-size: medium'>"
									+ "暂无收货地址，请先添加收货地址"
									+ "</td></tr>"
							$("#address-list").empty().append(text)
						}
					},
					error: function (error) {
						alert(error.message)
					}
				})
			})

		</script>


	</head>


	<body>
		<!--头部开始-->
		<div class="header"></div>
		<!--头部结束-->

		<!--中间导航条开始 -->
		<div class="middleNavigation"></div>
		<!--中间导航条结束-->


		<div class="container">
			<div class="col-md-2">
				<!--左侧导航开始-->
				<div class="panel-group" id="accordion">
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：我的订单-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的订单</a>
							</p>
						</div>
						<div id="collapseOne" class="panel-collapse collapse">
							<div class="panel-body">
								<div><a href="orders.html">全部订单</a></div>
								<div><a href="orders.html">待付款</a></div>
								<div><a href="orders.html">待收货</a></div>
								<div><a href="orders.html">待评价</a></div>
								<div><a href="orders.html">退货退款</a></div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<!--主选项：资料修改-->
							<p class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">资料修改</a>
							</p>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse in">
							<div class="panel-body">
								<div><a href="password.html">修改密码</a></div>
								<div><a href="userdata.html">个人资料</a></div>
								<div><a href="upload.html">上传头像</a></div>
								<div><a href="address.html"><b>收货管理</b></a></div>
							</div>
						</div>
					</div>
				</div>
				<!--左侧导航结束-->
			</div>
			<div class="col-md-10">
				<div class="panel panel-default">
					<ul class="nav nav-tabs">
						<li><a href="password.html">修改密码</a></li>
						<li><a href="userdata.html">个人资料</a></li>
						<li><a href="upload.html">上传头像</a></li>
						<li class="active"><a href="#">收货管理</a></li>
					</ul>
					<div class="panel-body">
						<!--地址显示-->
						<table class="table table-striped">
							<caption>收货地址列表</caption>
							<thead>
								<tr>
									<th>地址类型</th>
									<th>收货人姓名</th>
									<th>详细地址</th>
									<th>联系电话</th>
									<th colspan="3">操作</th>
								</tr>
							</thead>
							<tbody id="address-list">
								<!-- 待填充部分-->
							</tbody>
						</table>
						<a href="addAddress.html" class="btn btn-sm btn-primary"><span class="fa fa-plus"></span>新增收货地址</a>
					</div>
				</div>
			</div>
		</div>

		<div class="clearfix"></div>
		<!--页脚开始-->
		<div class="footer"></div>
		<!--页脚结束-->
	</body>

</html>